<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=100, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content=""/>
    <title>香香互娱</title>
    <link rel="stylesheet" type="text/css" href="/paycss/style.css"/>
    <script src="/payjs/jquery.min.js"></script>
    <script src="/payjs/layer/layer.js"></script>
    <script src="/payjs/jweixin-1.6.0.js "></script>
    <script src="/payjs/ajax.js "></script>
    <script>
        var pid = getParameterStr("pid"); // 用户id
        var aid = getParameterStr("aid"); // 微信appId
        var t = Number(getParameterStr("t")); // 是否给自己充值
        var m = Number(getParameterStr("m")); // 金额
        var r = Number(getParameterStr("r")); // 钻石

        $(function () {
            var _payParams = getPayParamsHandler();
            $("#masonryNum").text(_payParams.masonry);
            $("#payMoney").text(parseInt(_payParams.payMoney) / 100 + "元");

            wx.config({
                debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
                appId: "[[${appId}]]", // 必填，公众号的唯一标识
                timestamp: "[[${timestamp}]]", // 必填，生成签名的时间戳
                nonceStr:"[[${nonceStr}]]", // 必填，生成签名的随机串
                signature: "[[${signature}]]", // 必填，签名
                jsApiList: ["chooseWXPay"], // 必填，需要使用的 JS 接口列表
            });


        });

        function payHandler() {
            layer.load(1, {
                shade: [0.1, "#fff"], //0.1透明度的白色背景
            });
            const _params = getPayParamsHandler()
            sendPostAjax("/adapay/testPay",
                _params,
                function (res) {
                    layer.closeAll();
                    var payParams = JSON.parse(res.data);
                    wx.chooseWXPay({
                        appId: payParams.appId,
                        timestamp: payParams.timeStamp,
                        nonceStr: payParams.nonceStr,
                        package: payParams.package,
                        signType: payParams.signType,
                        paySign: payParams.paySign,
                        success: function (res) {
                            if (res.errMsg === "chooseWXPay:ok") {}
                        },
                        cancel: function (res) {
                        },
                        fail: function (res) {
                        },
                    });
                }
            );
        }
        // 获取参数
        function getPayParamsHandler() {
            return {
                playerId: pid,
                toId: t,
                payMoney: m, //金额
                appId: aid, //微信appid
                masonry: r, //钻石
            };
        }
        // 根据键获取url参数值
        function getParameterStr(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let r = location.search.substr(1).match(reg);
            if (r != null) return decodeURI(decodeURIComponent(decodeURI(r[2])));
            return "";
        }

        function alertHandler(info) {
            // alert(info)
        }
    </script>
</head>

<body>
<div class="order_info">
    <p class="title"></p>
    <p class="product_name">商品名称：<span id="masonryNum"></span></p>
    <p class="order_player">充值账户：<span th:text="${playerName}"></span></p>
    <p class="order_money">支付金额：<span id="payMoney"></span></p>
</div>
<div class="btns">
<!--    <button class="button back" type="button" onclick="back()">返回</button>-->
    <button class="button pay" type="button" onclick="payHandler()">
        支付
    </button>
</div>
<div class="order_warn">
    <p class="title">充值说明：</p>
    <p>1.钻石商品为虚拟物品，一经出售，概不退还</p>
    <p>2.支付遇到问题?请联系客服微信:cdkf008</p>
    <p>3.请合理安排时间,享受健康生活.</p>
</div>
</body>
</html>
